import React, {useState} from "react";
import {Outlet} from 'react-router-dom'
import style from './main.css'
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';
import {Button, Layout, Menu, theme} from 'antd';
import CommonSider from '../components/CommonSider'
import CommonTag from '../components/CommonTag'
import CommonHeader from '../components/CommonHeader'
import RouterAuth from "../routerAuth";


const {Header, Sider, Content} = Layout;

export default () => {
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: {colorBgContainer, borderRadiusLG},
    } = theme.useToken();
    return (
        <RouterAuth>
            <Layout className={'Layout'}>
                <CommonSider collapsed={collapsed}/>
                <Layout>
                    <CommonHeader setCollapsed={setCollapsed} collapsed={collapsed}/>
                    <CommonTag/>
                    <Content
                        className={'ant-layout-content'}
                        style={{
                            margin: '16px',
                            padding: 16,
                            minHeight: 280,
                            background: colorBgContainer,
                            borderRadius: borderRadiusLG,
                        }}
                    >
                        <Outlet/>
                    </Content>
                </Layout>
            </Layout>
        </RouterAuth>

    );
}